<!--培训计划详情-->
<template>
	<el-row>
		<el-col :span="20" ref="TimelineRef">
			<el-card>
				<el-row style="margin-bottom: 20px">
					<el-col :span="12">
						<el-button @click="visible = false">返回</el-button>
					</el-col>
					<el-col :span="12" style="text-align: right">
						<el-button type="primary" @click="">编辑</el-button>
						<el-button type="" @click="">添加学员</el-button>
						<el-button type="" @click="">添加课程</el-button>
						<el-button type="" @click="">结束培训</el-button>
					</el-col>
				</el-row>

				<div class="info">
					<el-image :src="dataForm.imgUrl" style="width: 150px; height: 150px">
						<template #error>
							<div class="image-slot">
								<!-- /*图片加载失败显示的内容*/ -->
								<img src="@/assets/R-C.jpg" />
							</div>
						</template>
					</el-image>
					<div style="font-size: 18px">{{ dataForm.name }}</div>
					<div style="color: #999999"><span>培训分类:</span>{{ dataForm.typeId }}</div>
					<div style="color: #999999"><span>培训计划时间:</span>{{ dataForm.startDate.split('T')[0] }} 至 {{ dataForm.endDate.split('T')[0] }}</div>
				</div>
			</el-card>

			<el-card class="info-tag" style="margin: 15px 0px;">
				<span v-on:click="showCourse()" v-bind:class="{ 'tag-span': CourseShow }">课程信息</span>
				<span v-on:click="showStaff()" v-bind:class="{ 'tag-span': StaffShow }">学院信息</span>
			</el-card>
			<el-card>
				<course-info-list ref="CourseInfoListRef" v-if="CourseShow"></course-info-list>
				<staff-info-list ref="StaffInfoListRef" v-if="StaffShow"></staff-info-list>
			</el-card>
		</el-col>

		<el-col :span="4" style="padding-left: 15px">
			<el-card id="TimelineId">
				<el-timeline>
					<el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color">
						<span
							:style="{
								color: activity.color
							}"
						>
							<div style="font-size: 13px; opacity: 0.4; padding-top: 1.2px; margin-bottom: 10px">{{ activity.timestamp }}</div>
							<div>{{ activity.content }}</div>
						</span>
					</el-timeline-item>
				</el-timeline>
			</el-card>
		</el-col>
	</el-row>
</template>
<style>
.info {
	text-align: center;
	& > div {
		margin: 10px 0px;
	}
}
.info-tag span {
	margin: 0px 20px;
	padding: 20px 0px 16px 0px;
	&:hover {
		/* border-bottom: 5px solid #409eff; */
		color: #409eff;
	}
}
.tag-span {
	border-bottom: 5px solid #409eff;
}
.tag-span-err {
	border-bottom: 5px solid white;
}
.dialog-info > div.el-dialog__body {
	margin-top: 0px;
	padding-top: 0px;
}
</style>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useTrainApi, useTrainSubmitApi } from '@/api/nb/train/train'
import UploadImgView from '@/views/nb_module/image/upload-img-view.vue'
import CourseInfoList from './course/info-list.vue'
import StaffInfoList from '@/views/nb/staff/plane/info-list.vue'
import { Ref } from 'vue'
import { useRoute } from 'vue-router'
import { refDefault } from '@vueuse/core'

const route = useRoute()

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()
const dataPList = ref([])

const dataForm = reactive({
	id: '',

	name: '',
	imgUrl: '',
	typeId: '',
	description: '',
	remark: '',
	startDate: '',
	endDate: '',
	population: '',
	isAll: '1'
})

const init = (id?: number) => {
	visible.value = true
	dataForm.id = ''

	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}

	if (id) {
		getTrain(id)
	}
}

const getTrain = (id: number) => {
	useTrainApi(id).then(res => {
		Object.assign(dataForm, res.data)
	})
}

const CourseShow = ref(true)
const StaffShow = ref(false)
const showStaff = () => {
	CourseShow.value = false
	StaffShow.value = true
}
const showCourse = () => {
	CourseShow.value = true
	StaffShow.value = false
}

defineExpose({
	init,
	dataPList
})

let id = route.query.id as string
getTrain(parseInt(id))

//时间轴
import { MoreFilled } from '@element-plus/icons-vue'

const activities = [
	{
		content: 'Custom icon',
		timestamp: '2018-04-12 20:46',
		color: '#0bbd87'
	},
	{
		content: 'Custom color',
		timestamp: '2018-04-03 20:46'
	},
	{
		content: 'Custom size',
		timestamp: '2018-04-03 20:46'
	},
	{
		content: 'Custom hollow',
		timestamp: '2018-04-03 20:46'
	},
	{
		content: 'Default node',
		timestamp: '2018-04-03 20:46'
	}
]

const TimelineRef = ref()
const pHeight = () => {
	let pp = document.getElementById('TimelineId')
	let aa = TimelineRef.value.$el.clientHeight
	pp?.setAttribute('style', 'height:100%;')
}
onMounted(() => {
	pHeight()
})
</script>
